<template>
	<view class="body">
		<view class="detailsbody">
			<view @click="tiaozhuang(item.id)" class="content2" v-for="(item, index) in list" :key="index">
				<view class="detailsmsg">
					<view class="detailsimg">
						<image class="img" :src="item.img"></image>
					</view>
					<view class="name">{{item.name}}</view>
					<view class="location">{{item.location}}</view>
					<view class="data">检查时间：{{item.createtime}}</view>
					<view class="sign" v-if="item.type1=='1'">今日已检</view>
					<view class="text1" v-if="item.status=='1'">
						<view class="tubiao1"></view>
						<view class="normal">正常</view>
					</view>
					<view class="text1" v-if="item.status=='2'">
						<view class="tubiao3"></view>
					    <view class="abnormal">异常</view>
					</view>
					<view class="text1" v-if="item.status=='3'">
						<view class="tubiao5"></view>
					    <view class="fault">故障</view>
					</view>
					<view class="text1" v-if="item.type1=='0'">
					    <view class="uninspected">未巡检</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				list: [],
				status:'',
				type1:'',
				type:'',
				id:''
			}
		},
		onLoad () {
			this.getData();
		},
		methods: {
			getData () {
				uni.request({
					url: 'http://xj.gccrw.cn/api/app/consearch', 
					data: {
						type:1,
						type1:'',
						status:2
					},
					 method: "POST",
					success: (res) => {
						this.list = res.data.data;
					}
				})
			},
			tiaozhuang (id) {
				uni.navigateTo({
					url:'/pages/xunjiaxq/xunjiaxq?id=' + id
				})
			}
		}
	}
</script>

<style>
	.heand {
		width: 100%;
		background-color: #3C6DD2;
		height: 76upx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	.hinput {
	    background-color: #FFFFFF;
		width: 75%;
		border-radius: 10upx;
		left: 10upx;
		padding-left: 50upx;
		position: absolute;
	}
	.sosouicon {
		width: 30upx;
		height: 30upx;
		z-index: 9999;
		margin-right: 80%;
	}
	.searchtext {
		color: #FFFFFF;
	}
	.bodyheander {
		width: 100%;
		background-color: #FFFFFF;
		padding: 3%;
		display: flex;
		font-size: 32upx;
	}
	.tittle {
		width: 50%;
		text-align: center;
		display: flex;
		align-items: center;
		color: #333333;
		justify-content: center;
	}
	.size {
		width: 20upx;
		height: 20upx;
		margin-left: 20upx;
		transform: rotate(180deg);
	}
	.detailsbody {
		width: 100%;
		display: flex;
	    flex-wrap: wrap;
	}
	.content2 {
		display: flex;
		width: 40%;
        background-color: #FFFFFF;
        padding: 12upx;
		margin: 3%;
		border-radius: 23upx;
		position: relative;
	}
	.sign {
		color: #FFFFFF;
		font-size: 28upx;
		position: absolute;
		margin-left: -10upx;
		background-color: #3C6DD2;
		margin-top: 28upx;
		width: 38%;
		text-align: center;
		border-radius: 0upx 10upx 10upx 0upx;
		padding: 4upx;
	}
	.detailsmsg {
		width: 100%;
		display: flex;
		text-align: center;
		flex-direction: column;
	}
	.detailsimg {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.name {
		color: #333333;
		font-size: 28upx;
		padding: 5upx;
	}
	.data {
		color: #999999;
		font-size: 23upx;
		padding: 5upx;
	}
	.location {
		font-size: 23upx;
		color: #333333;
		padding: 5upx;
	}
	.text1 {
		font-size: 20upx;
		display: flex;
		justify-content: center;
	}
	.normal {
		color: #2EC13C;
		padding-left: 14upx;
		padding-right: 20upx;
		font-size: 24upx;
		display: flex;
		align-items: center;
	}
	.abnormal {
		color: #FFD200;
		padding-left: 14upx;
		padding-right: 20upx;
		font-size: 24upx;
		display: flex;
		align-items: center;
	}
	.fault {
		color: #FD0006;
		padding-left: 14upx;
		padding-right: 20upx;
		font-size: 24upx;
		display: flex;
		align-items: center;
	}
	.uninspected {
		color: #999999;
		font-size: 28upx;
		padding: 5upx;
	}
	.tubiao1 {
		background-color: #2EC13C;
		border-radius: 50%;
		width: 28upx;
		height: 28upx;
		border: 4upx solid #C0ECC4;
	}
	.tubiao3 {
		background-color: #FFD200;
		border-radius: 50%;
		width: 28upx;
		height: 28upx;
		border: 4upx solid #FFF1B2;
	}
	.tubiao5 {
		background-color: #FD0006;
		border-radius: 50%;
		width: 28upx;
		height: 28upx;
		border: 4upx solid #FEB2B4;
	}
</style>
